<template>
    <div class="details-nav">
    <el-menu default-active="1"
      mode="horizontal" @select="handleSelect" text-color="#668d2f" active-text-color="#668d2f">
      <el-menu-item v-show="route.path === '/addmessage/publishgoods'" index="1" @click="PublishGoodsClick">发布商品</el-menu-item>
      <el-menu-item v-show="route.path === '/addmessage/publishneeds'" index="2" @click="PublishNeedsClick">发布需求</el-menu-item>
      <el-menu-item v-show="route.path === '/addmessage/publishknowledges'" index="3" @click="PublishKnowledgesClick">发布知识</el-menu-item>
    </el-menu>
    <router-view></router-view>
  </div>
</template>

<script lang="ts" setup>
import { useRoute} from 'vue-router'

const route = useRoute()

onMounted(() => {
  console.log(route.path)
})

function handleSelect(){

}

function PublishGoodsClick(){

}

function PublishNeedsClick(){

}

function PublishKnowledgesClick(){
    
}
</script>

<style lang="less" scoped>
.details-nav {
  width: 1100px;
  margin: 0 auto;
  background: #fff;
  min-height: 100%;
  .el-menu-demo {
    height: 80px;

    .el-menu-item {
      line-height: 80px;
      height: 80px;
      font-size: 16px;
    }
  }
}
</style>